<template>
  <div class="com-content">
    <!-- 面包屑 -->
    <Header :headerData="headerData" />

    <!-- 页面内容 -->
    <div class="com-sub-content">
      <div class="main-content">
        <div class="search">
          <div class="top">
            <h3>查询条件</h3>
            <el-divider />
            <div class="search-row">
              <el-form :inline="true" :model="search" class="demo-3">
                <el-form-item label="申报表种类">
                  <el-select v-model="search.s1" :empty-values="[null, undefined]">
                    <el-option
                      v-for="item in selectData1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="更正类型">
                  <el-select
                    v-model="search.s2"
                    multiple
                    collapse-tags
                    :max-collapse-tags="1"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in selectData2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <template v-if="!searchHidden">
                  <el-form-item label="作废标志">
                    <el-select v-model="search.s3" :empty-values="[null, undefined]">
                      <el-option
                        v-for="item in selectData3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="税款所属期起">
                    <el-date-picker
                      v-model="search.date1"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="税款所属期止">
                    <el-date-picker
                      v-model="search.date2"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="申报日期起">
                    <el-date-picker
                      v-model="search.date3"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="申报日期止">
                    <el-date-picker
                      v-model="search.date4"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择"
                      clearable
                    />
                  </el-form-item>
                </template>

                <el-form-item class="search-col">
                  <div class="flex-row-end search-btns">
                    <el-button @click="resetHandler">重置</el-button>
                    <el-button type="primary" @click="searchHandler">查询</el-button>
                    <el-button type="primary" text @click="searchHidden = !searchHidden">
                      <template v-if="searchHidden">
                        展开
                        <el-icon><ArrowDown /></el-icon>
                      </template>
                      <template v-else>
                        收起
                        <el-icon><ArrowUp /></el-icon>
                      </template>
                    </el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="bottom">
            <h3>查询结果</h3>
            <el-divider />
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{
                color: '#333333',
                backgroundColor: '#f9fafd',
                fontWeight: 'bold',
              }"
            >
              <el-table-column label="序号" type="index" align="center" width="60" />
              <el-table-column label="申报表种类" align="center" width="160">
                <template #default="scope">
                  <router-link
                    v-if="scope.row.table == 'business_income_tax'"
                    :to="{ path: '/pages/a7', query: { id: scope.row.id, table: scope.row.table } }"
                    class="link-text"
                  >
                    {{ scope.row.type || "-" }}
                  </router-link>
                  <router-link
                    v-if="scope.row.table == 'property_behavior'"
                    :to="{ path: '/pages/a8', query: { id: scope.row.id, table: scope.row.table } }"
                    class="link-text"
                  >
                    {{ scope.row.type || "-" }}
                  </router-link>
                  <router-link
                    v-if="scope.row.table == 'vataat'"
                    :to="{
                      path: '/pages/a10',
                      query: { id: scope.row.id, table: scope.row.table },
                    }"
                    class="link-text"
                  >
                    {{ scope.row.type || "-" }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column label="申报日期" align="center">
                <template #default="scope">
                  {{ scope.row.time || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="税款所属期起" align="center">
                <template #default="scope">
                  {{ scope.row.s_date || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="税款所属期止" align="center">
                <template #default="scope">
                  {{ scope.row.e_date || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="应补退税额" align="center">
                <template #default="scope">
                  {{ scope.row.tui || "" }}
                </template>
              </el-table-column>
              <el-table-column label="更正类型" align="center">新产生申报表</el-table-column>
              <el-table-column label="作废标志" align="center">未作废</el-table-column>
              <el-table-column label="作废日期" align="center">
                <template #default="scope">
                  {{ scope.row.aaa }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:currentPage="search.pageNo"
              v-model:page-size="search.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Http from "@/utils/api";
import { formatCurrency } from "@/utils/index";

const headerData = ref<any>({
  title: "申报信息查询",
  type: 2,
  list: [
    { title: "税务数字账户", url: "" },
    { title: "账户查询", url: "" },
    { title: "申报信息查询", url: "" },
  ],
});

const selectData1 = [{ value: "", label: "全部" }];
const selectData2 = [
  { value: "1", label: "新产生申报表" },
  { value: "2", label: "被更正的申报表" },
  { value: "3", label: "更正后新产生的申报表（全量模式）" },
];
const selectData3 = [
  { value: "", label: "全部" },
  { value: "2", label: "未作废" },
  { value: "3", label: "已作废" },
];

const tableData = ref<any>([]); // 列表数据
const total = ref(0); // 分页总条目
const searchHidden = ref(false); // 是否隐藏搜索条件
const search = ref<any>({
  s1: "",
  s2: ["1", "3"],
  s3: "2",
  date1: "",
  date2: "",
  date3: "",
  date4: "",
  pageSize: 10,
  pageNo: 1,
});

// 获取table列表
function getDataList() {
  let params = {
    startTime: search.value.date3,
    endTime: search.value.date4,
  };
  Http.Get("api1", params).then((res: any) => {
    if (res.code == 1) {
      tableData.value = res.data;
      total.value = res.data.length;
    }
  });
}
// 分页操作
const handleSizeChange = (val: number) => {
  search.value.pageSize = val;
  getDataList();
};
const handleCurrentChange = (val: number) => {
  search.value.pageNo = val;
  getDataList();
};
// 搜索
const searchHandler = () => {
  search.value.pageNo = 1;
  search.value.pageSize = 10;
  getDataList();
  // 缓存查询日期
  localStorage.setItem("searcha6", JSON.stringify(search.value));
};
// 重置
const resetHandler = () => {
  search.value = {};
  search.value.s1 = "";
  search.value.s2 = ["1", "3"];
  search.value.s3 = "2";
  search.value.pageNo = 1;
  search.value.pageSize = 10;
  initDate(1);
  getDataList();
};

// 获取当前月的第一天的日期，以及当前的日期
const initDate = (tag: any) => {
  const now = new Date();
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);

  // 如果有缓存日期
  if (localStorage.getItem("searcha6") && !tag) {
    const searchData = JSON.parse(localStorage.getItem("searcha6") ?? "{}");
    search.value.date3 = searchData.date3;
    search.value.date4 = searchData.date4;
    return;
  }

  search.value.date3 = firstDay.toLocaleDateString("sv"); // 'sv' locale uses YYYY-MM-DD format
  search.value.date4 = now.toLocaleDateString("sv");
};

// 生命周期
onMounted(() => {
  localStorage.removeItem("searcha14");
  localStorage.removeItem("searcha15");
  initDate(0);
  getDataList();
});
</script>

<style lang="scss" scoped>
@use "./css/style";
</style>
